<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>投票详细修改</title>

    <!-- datepicker -->
    <link href="${ctx}/resource/v2/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="${ctx}/resource/v2/css/datepicker3.css" rel="stylesheet">
    <link href="${ctx}/resource/css/jquery.datetimepicker.css" rel="stylesheet"type="text/css" /> 
    
    <style type="text/css">
    	.radio label{
    		padding-left: 0;
    	}
    </style>
</head>
<body>

	<!-- 菜单及导航数据  -->
    <data id="info" nav="vote" menu="updateVoteDetail" service="投票服务" action="修改投票">

	<!-- 业务部分  开始  -->
   	<div class="row wrapper white-bg animated rotateIn min-height">
       	<div class="row">
           <div class="col-lg-12">
               <div class="ibox float-e-margins">
                   <div class="ibox-title">
                       <h5>投票内容修改 <small class="text-navy">倾听评选声音,满足评选需求</small></h5>
                       <div class="ibox-tools">
                           <a class="collapse-link">
                               <i class="fa fa-chevron-up"></i>
                           </a>
                           <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                               <i class="fa fa-wrench"></i>
                           </a>
                           <ul class="dropdown-menu dropdown-user">
                               <li><a href="#">Config option 1</a>
                               </li>
                               <li><a href="#">Config option 2</a>
                               </li>
                           </ul>
                           <a class="close-link">
                               <i class="fa fa-times"></i>
                           </a>
                       </div>
                   </div>
                   <div class="ibox-content">
                       <form class="form-horizontal" method="post" id="voteForm" action="">
                       	<div class="row">
							<div class="form-group">
								<label class="col-sm-3 control-label">投票标题</label>
								<div class="col-sm-7">
									<input type="text" id="title" name="title" value="${voteDetail[0].title}" class="form-control" placeholder="请输入一个投票标题，最大50个字符">
									<input type="hidden" id="oriTitle" name="oriTitle" value="${voteDetail[0].title}"/>
									<input type="hidden" id="tid" name="tid" value="${voteDetail[0].tid}"/>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label">
									投票类型
								</label>
								<div class="col-sm-7" id="voteType">
									<div class="radio i-checks">
										<label class="">
											<div class="iradio_square-green "
												style="position: relative;" id="dan">
												<input type="radio" name="type" value="0"
													style="position: absolute; opacity: 0;" class="">
												<ins class="iCheck-helper"
													style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
											</div> <i></i> 单选
										</label>
									</div>
									<div class="radio i-checks">
										<label class="">
											<div class="iradio_square-green"
												style="position: relative;" id="duo">
												<input type="radio" name="type" value="1"
													style="position: absolute; opacity: 0;">
												<ins class="iCheck-helper"
													style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
											</div> <i></i> 多选
										</label>
									</div>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label">
									投票隐私
								</label>
								<div class="col-sm-7" id="voteScope">
									<div class="radio i-checks">
										<label class="">
											<div class="iradio_square-green "
												style="position: relative;">
												<input type="radio" name="scope" value="0"
													style="position: absolute; opacity: 0;">
												<ins class="iCheck-helper"
													style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
											</div> <i></i> 任何人可投票
										</label>
									</div>
									<div class="radio i-checks">
										<label class="">
											<div class="iradio_square-green "
												style="position: relative;">
												<input type="radio" name="scope" value="1"
													style="position: absolute; opacity: 0;">
												<ins class="iCheck-helper"
													style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
											</div> <i></i> 会员可投票
										</label>
									</div>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div id="data_1" class="form-group">
								<label class="col-sm-3 control-label">投票截止时间</label>
								<div class="col-sm-7">
									<div class="input-group date">
										<span class="input-group-addon">
										<i class="fa fa-calendar"></i></span>
											<input type="text" name="endTime" value="${voteDetail[0].deadline }" class="form-control">
									</div>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group" id="voteOpenId">
								<label class="col-sm-3 control-label">投票选项</label>
								<div class="col-sm-7">
									<button class="btn btn-primary" type="button">添加选项</button>
									<button class="btn btn-danger" type="button">删除选项</button>
								</div>
							</div>
							<c:forEach items="${voteDetail}" var="detail" varStatus="status">
								<div class="form-group">
									<label class="col-sm-3 control-label"></label>
									<div class="col-sm-7">
										<div class="input-group m-b">
											<span class="input-group-addon">${status.index+1}</span>
											<input type="text" name="content${status.index+1}" value="${detail.content}" class="form-control" placeholder="请输入选项名称">
										</div>
									</div>
								</div>
							</c:forEach>
                        </div>
						<div class="row">
							<div class="form-group ">
								<label class="col-sm-3 control-label"></label>
                                   <div class="col-sm-7">
                                       <button type="button" class="btn btn-primary" id="save">保存</button>
                                       <button type="reset" class="btn btn-white">取消</button>
                                   </div>
                               </div>
                              </div>
					</form>
				</div>
               </div>
           </div>
       </div>
      </div>
	
	<js>
	
    <!-- Color picker -->
    <script type="text/javascript" src="${ctx}/resource/v2/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="${ctx}/resource/v2/js/bootstrap-colorpicker.min.js"></script>
    <script type="text/javascript" src="${ctx}/resource/js/jquery.datetimepicker.js"></script>	 

    <!-- iCheck -->
    <script src="${ctx}/resource/v2/js/icheck.min.js"></script>
    
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green checked',
            });
            $("#voteType").find("input[type='radio']").each(function() {
                if(this.value == "${voteDetail[0].type}") {  
                    //遍历radio组，使用iCheck设置选中项  
                    $(this).iCheck('check');  
                }  
            });
            $("#voteScope").find("input[type='radio']").each(function() {
                if(this.value == "${voteDetail[0].scope}") {
                    //遍历radio组，使用iCheck设置选中项  
                    $(this).iCheck('check');
                }
            });
        });
        //datepicker
        $('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            todayHighlight: true,
        	language: "zh",
        	format: "yyyy-mm-dd",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });
        
        //添加选项
        $("#voteOpenId button:eq(0)").click(function(){
        	var count = $("#voteOpenId").nextAll().length+1;
        	if(count > 9){
        		layer.msg('最多只能添加9项！', {time: 5000, icon:6});
        	}else{
        		var obj = $("#voteOpenId").next().clone();
        		obj.find(":input:eq(0)").attr("name","content"+count);
        		obj.find(":input:eq(0)").val("");
        		obj.find("span:eq(0)").html(count);
	        	$("#voteOpenId").parent().append(obj);
        	}
        });
        
      //添加删除事件
       $("#voteOpenId button:eq(1)").click(function(){
        	var count = $("#voteOpenId").nextAll().length;
        	if(count <= 2){
        		layer.msg("投票选项至少要求有2项！", {time: 5000, icon:6});
        		 
        	}else{
        		$("#voteOpenId").nextAll().last().remove();
        	}
        });
      
      //check title
     $(function(){
    	jQuery("#title").blur(function(){
    		var oriTitle = $("#oriTitle").val();
    		var title = $("#title").val();
    		if( !(oriTitle == title) ){
    			jQuery.ajax({
        			type: "post",
        			url:"${ctx}/vote/checkTitle.do",
        			data:jQuery("#voteForm").serialize(),
        			dataType:"json",
        			success:function(data){
        				if(data.flag=="failure"){
        						layer.msg(data.message, {time: 1000, icon:6});
        					}
        				},
        			error:function(){
        			}
        		});
    		}
    	});
    });
      
      //save vote content
      $(document).ready(
   		 function(){
    		jQuery("#save").click(function(){
    			jQuery.ajax({
    				type: "post",
    				url:"${ctx}/vote/saveVote.do",
    				data:jQuery("#voteForm").serialize(),
    				dataType:"json",
    				success:function(data){
    					if(data.flag=="success"){
    						layer.msg(data.message, {time: 1000, icon:6});
        					window.location.href="${ctx}/center/vote/myCreate.html"
    					}else{
    						layer.msg(data.message, {time: 1000, icon:6});
    					}
    				},
					error:function(data){
						alert(JSON.stringify(data));
					}
    			});
    		});
    });
    </script>
    
    </js>
</body>

</html>
